<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/6/16
  Time: 2:19 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <%--    内部样式写在style--%>
    <style>
        body {
            background: url("/imgs/123.jpg");
            background-size: cover; /*自适应浏览器*/
        }
        /*id选择器 - id属性的值必须是唯一的*/
        #login_div{
            /*border: 1px solid red;*/

            width: 50%;
            color: #000;
            margin-top: 80px;
            margin-left: 400px;
            padding: 5px;
            border: 1px solid #000;
            border-radius: 25px;
            box-shadow: 10px 10px 5px #888888;
        }

        .user_enter{
            text-align: center;
            color: black;
            text-shadow: 2px 2px 0px #000;
        }
        .page-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff url(/imgs/loading3.gif) center center no-repeat;
            z-index: 5000;
            background-size: 60px 120px;
        }
    </style>
</head>
<body>
<div id="page-loading" class="page-loading" style="display: none;"></div>
<%--    引入导航文件 include是属于jsp指令--%>
<%@ include file="../common/nav.jsp"%>

<%--    login-begin--%>
<div class="container" id="login_div">
    <%--        定义row--%>
    <div class="row">
        <form class="form-horizontal" role="form">
            <fieldset>
                <legend><h3 class="user_enter">用户登录入口</h3></legend>
                <div class="form-group has-feedback">
                    <label for="email" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-md-7">
                        <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        <label id="email_label" class="text-danger" style="display: none">* email不存在</label>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="code" class="col-sm-2 control-label">验证码</label>
                    <div class="col-md-7">
                        <input type="password" class="form-control" id="code" placeholder="请输入密码">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <div class="col-md-1" style="margin-left: -28px">
                        <button type="button" onclick="send_email()" class="btn btn-info">发送验证码</button>
                    </div>

                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">请记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <%--                            设置成button普通按钮--%>
                        <button type="button" onclick="login()" class="btn btn-default">登录</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<%--    login-end--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                按下 ESC 按钮退出。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

<script>
    //自定义js函数
    function send_email(){
        //js写法
        //let email = document.getElementById("email").value;

        //jquery写法 - jquery是js的框架
        //jquery菜鸟教程...
        let value = $("#email").val();

        //TODO.. 新建email的校验 - 校验是否为邮箱格式

        //jquery - ajax的写法发送数据到后台
        //第一个参数代表的是后台的映射路径
        //第二个参数代表的是发送的数据,key=value的形式,采用json格式{key:value}
        //第三个参数代表的是后端返回过来的json数据
        $.get('/user/code',{email:value},function(data){
            //data自动转换成json对象
            //json对象.key得到json值
            if(data.code=="404"){
                //拿到错误提示的label标签对象
                let email_label = document.getElementById("email_label");
                //显示出来
                email_label.style.display="";
            }else if(data.code=="200"){
                //console.log(data);
                //拿到错误提示的label标签对象
                let email_label = document.getElementById("email_label");
                //显示出来
                email_label.style.display="none";
                alert(data.msg);
            }
        })
    }

    //登录按钮的单击事件
    function login(){
        //1. 获取俩个文本框的数据
        let email_value = $("#email").val();
        let code_value = $("#code").val();

        //2. 通过ajax方法将这俩个数据发送到后端
        //发送参数仍然是json格式{key1:value1,key2:value2}
        $.get('/user/logincl',{email:email_value,code:code_value},function(data){
            console.log(data)
            if(data.code=="200"){
                //跳转到首页...
                window.location='/home.jsp';
            }
        })
    }

</script>
</body>
</html>
